<section>
  <h1>分页</h1>
  <doc-section [title]="'基础使用'" [code]="basic">
    <div sample>
      <app-demo-basic-page>
      </app-demo-basic-page>
    </div>
  </doc-section>
  <doc-section [title]="'最简分页'" [code]="simple">
    <div sample>
      <app-demo-simple-page>
      </app-demo-simple-page>
    </div>
  </doc-section>

  <doc-section [title]="'小型分页'" [code]="size">
    <div sample>
      <app-demo-size-page></app-demo-size-page>
    </div>
  </doc-section>

  <doc-section [title]="'最完整的分页'" [code]="full">
    <div sample>
      <app-demo-full-page></app-demo-full-page>
    </div>
  </doc-section>

  <doc-section [title]="'参数说明'" [sample]="false">
    <table desc class="table">
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>可选值</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>atPageIndex</td>
        <td>当前页码</td>
        <td>Number</td>
        <td>-</td>
        <td>1</td>
      </tr>
      <tr>
        <td>total</td>
        <td>总的数据条目数</td>
        <td>Number</td>
        <td>-</td>
        <td>0</td>
      </tr>
      <tr>
        <td>atPageSize</td>
        <td>每页最多展示的条目数</td>
        <td>Number</td>
        <td>-</td>
        <td>10</td>
      </tr>

      <tr>
        <td>atPageSizer</td>
        <td>是否显示每页展示数量的&nbsp;<code>select</code>&nbsp;选择框</td>
        <td>Boolean</td>
        <td>-</td>
        <td>false</td>
      </tr>
      <tr>
        <td>atQuickJump</td>
        <td>是否显示快速跳转</td>
        <td>Boolean</td>
        <td>-</td>
        <td>false</td>
      </tr>
      <tr>
        <td>size</td>
        <td>分页组件的大小</td>
        <td>String</td>
        <td><code>small</code></td>
        <td>-</td>
      </tr>
      <tr>
        <td>simple</td>
        <td>是否为极简风格</td>
        <td>Boolean</td>
        <td>-</td>
        <td>false</td>
      </tr>
      </tbody>
    </table>

  </doc-section>

  <doc-section [title]="'事件说明'" [sample]="false">
    <table desc class="table">
      <thead>
      <tr>
        <th>事件名称</th>
        <th>说明</th>
        <th>返回值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>pageIndexChange</td>
        <td>页码改变时触发的回调</td>
        <td>页码</td>
      </tr>
      <tr>
        <td>pageSizeChange</td>
        <td>切换每页显示的条数时触发的回调</td>
      </tr>
      </tbody>
    </table>

  </doc-section>

</section>
